<template>
  <div class="user-manager-container">
    <!-- 搜索栏部分 -->
    <el-row class="search-bar" justify="space-between" align="middle">
      <el-col :span="6">
        <el-input
          v-model="searchQuery"
          placeholder="请输入用户名搜索"
          suffix-icon="el-icon-search"
          clearable
          @input="fetchUsers"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>

    <!-- 用户列表 -->
    <el-table
      :data="filteredUsers"
      v-loading="loading"
      max-height="500"
      border
      stripe
    >
      <el-table-column
        prop="user_id"
        label="用户ID"
        width="120"
        sortable
      ></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="250"
        sortable
      ></el-table-column>
      <el-table-column fixed="right" label="操作" header-align="center">
        <template #default="scope">
          <div class="button-container">
            <!-- 封禁按钮 -->
            <el-button
              size="mini"
              @click="blockUser(scope.row.user_id)"
              :disabled="scope.row.status === '0'"
              type="danger"
              plain
            >
              封禁
            </el-button>
            <!-- 解封按钮 -->
            <el-button
              size="mini"
              @click="unblockUser(scope.row.user_id)"
              :disabled="scope.row.status === '1'"
              type="success"
              plain
            >
              解封
            </el-button>
            <!-- 删除按钮 -->
            <el-button
              size="mini"
              @click="deleteUser(scope.row.user_id)"
              type="danger"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      searchQuery: "",
      loading: false,
    };
  },
  computed: {
    // 计算过滤后的用户数据
    filteredUsers() {
      if (!this.searchQuery) return this.users;
      return this.users.filter((user) =>
        user.username.includes(this.searchQuery)
      );
    },
  },
  methods: {
    // 获取用户数据
    fetchUsers() {
      this.loading = true;
      this.$axios
        .get("/users", { params: { search: this.searchQuery } })
        .then((res) => {
          this.users = res.data;
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取用户列表失败，请稍后重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 封禁用户
    blockUser(userId) {
      this.$axios
        .put(`/users/${userId}/block`)
        .then(() => {
          this.$message.success("用户已封禁");
          this.fetchUsers(); // 更新用户列表
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("封禁用户失败，请稍后重试");
        });
    },
    // 解封用户
    unblockUser(userId) {
      this.$axios
        .put(`/users/${userId}/unblock`)
        .then(() => {
          this.$message.success("用户已解封");
          this.fetchUsers(); // 更新用户列表
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("解封用户失败，请稍后重试");
        });
    },
    // 删除用户
    deleteUser(userId) {
      this.$confirm("确认删除该用户吗?", "删除用户", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(`/user/${userId}`)
            .then(() => {
              this.$message.success("用户已删除");
              this.fetchUsers(); // 更新用户列表
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("删除用户失败，请稍后重试");
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
  mounted() {
    this.fetchUsers(); // 初次加载用户列表
  },
};
</script>

<style scoped>
.user-manager-container {
  margin-top: 50px;
  padding: 24px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-bar {
  margin-bottom: 20px;
}

.el-table {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.el-table-column {
  font-weight: 500;
}

.el-button {
  margin-right: 8px;
}

.el-table__header {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table__row:hover {
  background-color: #f2f2f2;
  cursor: pointer;
}

.el-table__body-wrapper {
  overflow-y: auto;
}

.el-input {
  max-width: 300px;
}

.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 6px; /* 按钮之间的间距 */
}
</style>

